<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        height: 100vh;
        overflow: hidden;
    }
    #demo {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background: pink;
    }
</style>
<body>
<canvas id="demo" width="300" height="300"></canvas>
</body>
<script>
    var canvas = document.getElementById('demo');
    var flag = 0;
    var scale = 0;
    var flag_scale = 0;
    if(canvas.getContext){
        var ctx = canvas.getContext("2d");


        ctx.save();
        ctx.translate(150,150);
        ctx.fillRect(-50,-50,100,100);
        ctx.restore();
        setInterval(function (){
            flag++;
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.save();
            ctx.translate(150,150);
            ctx.rotate(flag*Math.PI/180);

            //放大
            if (scale==100){
                flag_scale=-1;
            }else if(scale==0){
                flag_scale=1
            }
            scale+=flag_scale;
            ctx.scale(scale/50,scale/50);
            ctx.beginPath();
            ctx.fillRect(-50,-50,100,100);
            ctx.restore();

        },1000/60)
    }

</script>
</html>